<template>
  <top></top>
  <!-- 内容 -->
  <div class="content">
    <h1>哈登UI</h1>
    <h2 style="margin-top: 15px">基于vue3.0的框架</h2>
    <div class="btns">
      <div class="address" @click="togit">gitee</div>
      <div class="go" @click="go">开始</div>
    </div>
  </div>
  <div class="features">
    <div class="item" v-for="(item, index) in featuresarr" :key="index">
        <svg class="left-img">
          <use :xlink:href="item.imgname"></use>
        </svg>
      <div class="item-font">
        <div class="text1">{{ item.text }}</div>
        <div class="text2">{{ item.text2 }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import top from "./components/top.vue";
export default {
  components: {
    top,
  },
  setup() {
    const router = useRouter();
    const togit = function () {
      window.location.href = "https://gitee.com/yang710926/harden-ui";
    };
    const go = function () {
      console.log(router);
      router.push("Doc");
    };
    const featuresarr = reactive([
      {
        text: "基于Vue3",
        text2: "使用了Vue3Composition API",
        imgname:'#icon-vue'
      },
      {
        text: "基于Typescript",
        text2: "源码采用typescript",
        imgname:'#icon-typescript'
      },
      {
        text: "代码易读",
        text2: "每个组件的源码都及其简洁",
        imgname:'#icon-gongju'
      },
    ]);
    return { featuresarr, togit, go };
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 120px 0 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 400;
  color: #44295b;
  padding-top: 50px;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
  margin-top: 70px;
  height: 277px;
  background: linear-gradient(145deg, #e8cbc0, #636fa4);
  clip-path: ellipse(70% 60% at 50% 40%);
}
.btns {
  display: flex;
  margin-top: 20px;
  > div {
    cursor: pointer;
    width: 80px;
    height: 32px;
    line-height: 32px;
    margin: 0 8px;
    padding: 0 16px;
    background: #636fa4;
    border-radius: 16px;
    font-size: 18px;
    color: #ffffff;
  }
}
.features {
  flex-wrap: wrap;
  width: 70%;
  margin: 10% auto;
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    color: #6f486b;
    .left-img {
      width: 64px;
      height: 64px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-font {
      margin-left: 12px;
      .text1 {
        font-size: 24px;
      }
      .text2 {
        font-size: 16px;
        margin-top: 5px;
      }
    }
  }
}
@media (max-width: 500px) {
  .item {
    margin-top: 28px;
  }
}
</style>
